<!--
 * @页面名称:目录数据页
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="catalog_list">
    <Header :title="title" @clickLeft="clickLeft" />
    <var-table class="table_data" :elevation="false">
      <thead>
        <tr>
          <th style="white-space: nowrap" v-for="item in columns" :key="item.filed">{{ item.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <template v-for="item2 in columns" :key="item2.filed">
            <td style="white-space: nowrap" v-if="item2.filed !== 'operate' && item2.filed !== 'Title'">
              {{ item[item2.filed] }}
            </td>
            <td
              style="
                display: block;
                width: 200px;
                overflow: hidden;
                line-height: 46px;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              v-else-if="item2.filed === 'Title'"
            >
              {{ item[item2.filed] }}
            </td>
            <td style="white-space: nowrap" v-else>
              <var-menu placement="bottom-end" offset-x="-26px">
                <var-button type="primary" size="mini" v-if="routeData.childrenFmtId">子页面</var-button>
                <template #menu>
                  <var-cell v-for="(child, childIndex) in childData" :key="childIndex" @click="toSublevel(item, child)">{{
                    child.FMT_Name
                  }}</var-cell>
                </template>
              </var-menu>
              <var-button style="margin-left: 5px" type="primary" size="mini" @click="showFullText(item)">查看全文</var-button>
            </td>
          </template>
        </tr>
      </tbody>
      <template #footer>
        <div class="table-example-footer">
          <!-- 手机预览模式下分页使用了simple为true的模式，对小屏设备更友好 -->
          <var-pagination
            :simple="true"
            :current="pageSetting.pageIndex"
            :size="pageSetting.pageSize"
            :total="pageSetting.total"
            :size-option="pageSetting.sizeOption"
            @change="changePage"
          />
        </div>
      </template>
    </var-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useRouter, useRoute } from "vue-router";
import ACrypto from "@/utils/crypto";
import Header from "../header/index.vue";

const { proxy } = useCurrentInstance();
const title = ref("目录列表页");
// 路由信息
const router = useRouter();
const route = useRoute();
const routeData = ref(route.query as any); // 路由携带的参数
// 子级数据
const childData = ref<any>([]);

/**
 * 重新构建页面和数据
 */
// 数据列表
const dataList: any = ref([]);
// 表头
const columns = ref([
  { title: "大流水号", filed: "Order", width: "40px" },
  { title: "年份", filed: "Year", width: "40px" },
  { title: "档号", filed: "Code", width: "40px" },
  { title: "题名", filed: "Title", width: "40px" },
  { title: "操作", filed: "operate", width: "40px" }
]);
// 分页配置
const pageSetting = ref({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  sizeOption: [10, 20, 50, 100]
});
// 获取表格数据
const getData = () => {
  proxy.$vueAxios
    .get(
      "Dynamic/CommonGet",
      {
        fmid: routeData.value.fmid,
        fmtid: routeData.value.fmtid,
        catalogid: routeData.value.catalogid
          ? routeData.value.catalogid
          : JSON.parse(decodeURIComponent(routeData.value.fatherObj as any)).Catalog_ID,
        status: routeData.value.status,
        searchType: routeData.value.fatherObj ? 2 : 1,
        pageIndex: pageSetting.value.pageIndex,
        pageSize: pageSetting.value.pageSize,
        parentid: routeData.value.fatherObj
          ? JSON.parse(decodeURIComponent(routeData.value.fatherObj as any)).Record_ID
          : undefined
      },
      { noLoading: true }
    )
    .then((res: any) => {
      getChild();
      dataList.value = res.List;
      pageSetting.value.total = res.Count;
      dataList.value.forEach((item: any) => {
        item.Title = ACrypto.getSS(item.Title) === "" ? item.Title : ACrypto.getSS(item.Title);
      });
    });
};
// 切换分页
const changePage = (current: number, size: number) => {
  pageSetting.value.pageIndex = current;
  pageSetting.value.pageSize = size;
  getData();
};
// 获取当前数据下的子级
const getChild = () => {
  proxy.$vueAxios
    .post(
      "Master_Base_FormModel_Table/GetConditional",
      {
        order: "FMT_Type ASC",
        dtoList: [
          {
            fieldName: "FM_ID",
            fieldValue: routeData.value.fmid
          }
        ]
      },
      { noLoading: true }
    )
    .then((res: any) => {
      childData.value = res.List.filter((v: any) => v.FMT_Parent_ID === routeData.value.fmtid);
    });
};
// 跳转子级页面
const toSublevel = async (row: any, item: any) => {
  const Res = await proxy.$vueAxios.post("Master_Base_FormModel_Table/GetConditional", {
    order: "FMT_Type ASC",
    dtoList: [
      {
        fieldName: "FM_ID",
        fieldValue: routeData.value.fmid
      }
    ]
  });
  const childrenFmtId2 = Res.List.filter((v: any) => v.FMT_Parent_ID === item.FMT_ID).map((v: any) => v.FMT_ID);
  const stateName: any = {
    1: "Collect",
    2: "Arrangement",
    3: "Storage",
    4: "Utilization"
  };
  router.push({
    name: "mobileSublevel",
    query: {
      fmid: row.FM_ID,
      fmtid: item.FMT_ID,
      childrenFmtId: childrenFmtId2,
      status: stateName[row.Status],
      fondsId: routeData.value.fondsId,
      fatherObj: encodeURIComponent(JSON.stringify(row))
    }
  });
};
// 查看全文
const showFullText = (item: any) => {
  router.push({
    path: "/fulltext",
    query: {
      Record_ID: item.Record_ID
    }
  });
};
// 返回上一步
const clickLeft = () => {
  router.back();
};
onMounted(() => {
  getData();
  getChild();
});
watch(
  () => route.query,
  (newVal, oldVal) => {
    routeData.value = newVal;
    getData();
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.catalog_list {
  height: 100vh;
  .table_data {
    height: calc(100vh - 54px);
    :deep(.var-table__main) {
      height: calc(100% - 61px);
    }
  }
  .table-example-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 16px;
  }
}
</style>
